<!--
 * @Author: your name
 * @Date: 2020-01-04 17:33:55
 * @LastEditTime : 2020-01-16 16:14:22
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vhr_dev\src\components\inputSelect\inputSelect.vue
 -->

<template>
  <div>
      <el-input @focus="inputBlur" v-model="model" placeholder="请输入姓名" clearable></el-input>
      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" @row-dblclick="dboclick">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Input',
  data() {
    return {
       model: '',
       gridData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
  },
  watch: {
   value: {
        immediate: true,
        handler (newVal) {
          this.model = newVal
        },
      },
      model (newVal) {
        this.$emit('input', newVal)
      },
  },
  methods: {
    inputBlur(){
      this.dialogTableVisible = true
    },
    dboclick(row){
      this.model = row.name
      this.dialogTableVisible = false
    }
  }
}
</script>